<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    <script src="./qwebchannel.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main222" style="height:400px;"></div>
    <script>
        window.onload = function () {
            console.log('window.onload.');

            var str1 = "hello ";

            var str2 = "world";

            new QWebChannel(qt.webChannelTransport, function (channel) {
                window.bound = channel.objects.window_external;
                //连接qt信号 getInfo_returnValue 是信号名称
                bound.getInfo_returnValue.connect(function (returnValue) { //通过信号接收返回值
                    alert("returnValue=" + returnValue);
                });

                // 通过回调函数获取返回值
                bound.getInfo(str1, str2, function (returnValue) {
                    alert("returnValue=" + returnValue);
                });

            });

        };

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main222'));

        function setGaugeValue(value) {
            console.log(value);
            // alert('current prarm = ' + value)
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        detail: { formatter: '{value}%' },
                        data: [{ value: value, name: '完成率' }]
                    }
                ]
            };


            //console.log(JSON.stringify(option));
            myChart.setOption(option);
        }


        window.onresize = myChart.resize;

        setGaugeValue(55);

    </script>
</body>

</html>